<html lang="en">

<head>
    <style type="text/css" id="AMap_Dynamic_style">
        * {
            font-family: simsun, DejaVu Sans, sans-serif;
            font-weight: bold;
        }


        th,
        td {
            border: 2px solid #000 !important;
            /* 每个单元格都有边框 */
            /* padding: 8px; */
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
            /* 设置表头背景色 */
        }

        .main {
            width: 650px;
            margin: 20px auto;
            font-weight: bold;
        }
        .form-data-tr td {
            width: 16.66%;
        }
        .border-none {
            border-left: none!important;
            border-right: none!important;
        }
    </style>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2812179_v5ub0sq64aa.css">
    <title>智慧建筑一体化管理平台</title>
</head>

<body class="bg-white">
    <div id="app">
        <div class="main">
            <table cellpadding="10" cellspacing="0" style="width: 100%; border-collapse: collapse; border: none;">
                <!-- 标题行 -->
                <tr>
                    <td colspan="6" style="border-top:none!important;text-align: center; font-size: 18px;font-weight: bold;" class="border-none">
                        <span>{$data['name']}</span>
                        <span>({$data['subtitle']})</span>
                    </td>
                </tr>

                <!-- 有效日期行 -->
                <tr>
                    <td colspan="1" class="border-none">
                        <span>有效日期：</span><br><span>Effective Date</span>
                    </td>
                    <td colspan="1" class="border-none">
                        <span
                            style="font-weight: bold;font-size: 24px;">{:date('d',strtotime($data['expiredTime']))}</span>
                        <span><br>(日)day
                    </td>
                    <td colspan="1" class="border-none">
                        <span style="font-weight: bold;font-size: 24px;">
                            /
                        </span>
                    </td>
                    <td colspan="1" class="border-none">
                        <span
                            style="font-weight: bold;font-size: 24px;">{:date('m',strtotime($data['expiredTime']))}</span>
                        <span><br>(月)month
                    </td>
                    <td colspan="1" class="border-none">
                        <span style="font-weight: bold;font-size: 24px;">
                            /
                        </span>
                    </td>
                    <td colspan="1" class="border-none">
                        <span
                            style="font-weight: bold;font-size: 24px;">{:date('Y',strtotime($data['expiredTime']))}</span>
                        <span><br>(年)year
                    </td>
                </tr>

                <!-- 地点行 -->
                <tr>
                    <td colspan="3" style="border-left: none!important;">
                        <div style="display: flex;justify-content: center;align-items: center;">
                            <div style="margin-right: 40px;">
                                <span>地點:</span><br><span>Location</span>
                            </div>
                            <div>
                                <span>{$data['location']}</span>
                            </div>
                        </div>
                    </td>
                    <td colspan="3" style="border-right: none!important;">
                        <div style="display: flex;justify-content: center;align-items: center;">
                            <div style="margin-right: 40px;">
                                <span>分判商(如有):</span><br><span>Subcontractor(if applicable)</span>
                            </div>
                            <div>
                                <span>{$data['subcontractor']}</span>
                            </div>
                        </div>
                    </td>
                </tr>

                <!-- 符合项图片行 -->
                <tr>
                    <td colspan="3" style="text-align: center;border-left: none!important;">
                        
                    </td>
                    <td colspan="3" style="text-align: center;border-right: none!important;">
                        <img src="{:env('oss.url')}/asset/certificate/success.png" alt="Success" style="width: 133px;">
                        <div><span>(符合所有項目)<span class="normalfont">Comply to all</span></span></div>
                    </td>
                </tr>

                <!-- 金门管工签名行 -->
                <tr>
                    <td colspan="6" style="text-align: center; font-size: 18px;border-left: none!important;border-right: none!important;">
                        <div style="display: flex;align-items: center;">
                            <div>
                                <span>{$data.signature[0]['label']|default=''}:</span><br><span>{$data.signature[0]['subtitle']|default=''}:</span>
                            </div>
                            <div>
                                <img src="{$data.signature[0]['defaultValue']|default=''}" alt="Gammon Foreman Signature"
                                style="width: 140px;">
                            </div>
                        </div>
                    </td>
                </tr>


                <tr>
                    <td colspan="2" style="text-align: center; font-size: 18px;border-left: none!important;border-right: none!important;">
                        <span data-v-c0580ed2=""> Circle Item
                            for</span><span data-v-c0580ed2=""> Improvement (if only)</span>
                    </td>
                    <td colspan="4" style="text-align: center; font-size: 18px;border-left: none!important;border-right: none!important;">
                        <span data-v-c0580ed2="">請圈出須改善的項目(如有)[共11項][Total 11 items]</span>
                    </td>
                </tr>

                <tr class="form-data-tr">
                    <!-- 第二行第1/2列合并 -->
                    <td rowspan="2" style="border-left: none!important;height: 458px;">
                        <img data-v-c0580ed2="" src="{$data.formData[0]['image']}" alt="" style="max-width: 100%; ">
                    </td>
                    <td rowspan="2" style="height: 458px;">
                        {volist name="data.formData[0]['defaultValue']" id="item1" key="index1"}
                            {volist name="data.formData[0]['options']" id="item2" key="index2"}
                                {if $item2['label'] == $item1}
                                <div data-v-c0580ed2=""><span
                                        data-v-c0580ed2="">{$item2['label']}</span><span
                                        data-v-c0580ed2="">{$item2['value']}</span></div>
                                {/if}
                            {/volist}
                        {/volist}
                    </td>
                    {volist name="data.formData" id="item" key="index"}
                        {if $index >= 2 && $index <= 3} 
                            <td style="height: 274px;">
                                <img data-v-c0580ed2="" src="{$item['image']}" alt="" style="width: 100px;">
                            </td>
                            <td style="{if $index == 3}border-right:none!important; {/if}height: 274px;">
                                <div data-v-c0580ed2="">
                                    <span data-v-c0580ed2="">{$item['label']}</span>
                                    <span data-v-c0580ed2="">{$item['subtitle']}</span>
                                </div>
                            </td>
                        {/if}

                    {/volist}
                </tr>
                <tr class="form-data-tr">
                    {volist name="data.formData" id="item" key="index"}
                    {if $index >= 4 && $index <= 5} 
                        <td style="height: 274px;">
                            <img data-v-c0580ed2="" src="{$item['image']}" alt="" style="width: 100px;">
                        </td>
                        <td style="{if $index == 5}border-right:none!important; {/if}height: 274px;">
                            <div data-v-c0580ed2="">
                                <span data-v-c0580ed2="">{$item['label']}</span>
                                <span data-v-c0580ed2="">{$item['subtitle']}</span>
                            </div>
                        </td>
                        {/if}

                        {/volist}
                </tr>
                {volist name="data.formData" id="item" key="index"}
                    {if $index >= 6 && $index % 3 == 0}
                        <tr class="form-data-tr"> <!-- 每三个数据开始一个新的<tr> -->
                    {/if}
                    {if $index >= 6 }
                        <td style="{if $index % 3 == 0}border-left: none!important;{/if}{if (count($data['formData'])-3) < $index}border-bottom: none!important;{/if}">
                            <img data-v-c0580ed2="" src="{$item['image']}" alt="" style="width: 100px;">
                        </td>
                        <td style="{if ($index+1) % 3 == 0}border-right: none!important;{/if}{if (count($data['formData'])-3) < $index}border-bottom: none!important;{/if}">
                            <div data-v-c0580ed2="">
                                <span data-v-c0580ed2="">{$item['label']}</span>
                                <span data-v-c0580ed2="">{$item['subtitle']}</span>
                            </div>
                        </td>
                    {/if}

                    {if ($index >= 6 && ($index + 1) % 3 == 0)}
                </tr> <!-- 每三个数据结束当前的<tr> -->
                {/if}
                {/volist}
            </table>

        </div>
    </div>
    <!-- built files will be auto injected -->
</body>

</html>